<template>
  <div class="addsiteConten">
      <div class="addsiteNavBar">
        <van-nav-bar 
          title="添加收货地址" 
          :border="false" 
          left-arrow
          @click-left="goback"
          >
          </van-nav-bar>
      </div>
      <div class="addsiteBody">
          <van-field v-model="username" label="收货人姓名" placeholder="请填写" />
          <van-field v-model="tel" type="tel" label="手机号码" placeholder="请填写" />
          <van-field
          readonly
          clickable
          name="area"
          :value="site"
          label="所在地区"
          placeholder="请选择"
          @click="showArea = true"
          />
            <van-popup v-model="showArea" position="bottom">
                <van-area
                    :area-list="areaList"
                    @confirm="onConfirm"
                    @cancel="showArea = false"
                />
            </van-popup>
          <van-field v-model="detailsite" label="详细地址" placeholder="请填写详细地址" />
      </div>
      <van-button color="#00c657" class="affirm">确定</van-button>
  </div>
</template>

<script>
export default {
    name: "addsite",
    data(){
        return{
            username:'',
            tel:'',
            site:'',
            detailsite:'',
            showArea: false,
            areaList: {}, 
        }
    },
      methods: {
        onConfirm(values) {
         this.value = values.map((item) => item.name).join('/');
         this.showArea = false;
    },
        goback(){
            this.$router.go(-1)
        }
    },
}
</script>

<style scoped>
.addsiteConten{
    background:rgba(247,249,252,1);
}
.addsiteBody{
    margin-top: 11px;
}
.affirm{
    text-align: center;
    margin: 0 15px;
    width: 92%;
    margin-top: 27px;
}
</style>